<template>
  <!-- 步骤条配套的底部按钮 -->
  <div class="hu-btn-bottom">
    <van-button v-if="active!==0" type="info" block plain @click="preStep">{{ preText }}</van-button>
    <van-button
      v-if="active==lastActive && centerButton"
      :color="$color.linearBlue"
      @click="centerStep"
    >{{ centerButton }}</van-button>
    <van-button
      v-if="active!=lastActive || lastText"
      :loading="loading"
      loading-type="spinner"
      :color="$color.linearBlue"
      @click="nextStep"
    >{{active==lastActive?lastText:nextText}}</van-button>
  </div>
</template>

<script>
export default {
  name: "HuStepsButton",
  props: {
    // 当前步骤
    active: {
      type: Number,
      default: 0,
    },
    // 最后一步是第几步
    lastActive: {
      type: Number,
      default: 0,
    },
    // 下一步按钮是否显示加载
    loading: {
      type: Boolean,
      default: false,
    },
    preText: {
      type: String,
      default: "上一步",
    },
    nextText: {
      type: String,
      default: "下一步",
    },
    lastText: {
      type: String,
      default: "立即发布",
    },
    // 处于中间位置的按钮
    centerButton: {
      type: String,
      default: "",
    },
    // 是否隐藏下一步按钮
    hideNext: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },

  methods: {
    // 上一步
    preStep() {
      this.$emit("preStep");
    },
    // 下一步
    nextStep() {
      this.$emit("nextStep");
    },
    centerStep() {
      this.$emit("centerStep");
    },
  },
};
</script>

<style lang="less" scoped>
@import "@/less/color";
// 底部按钮
.hu-btn-bottom {
  width: 100%;
  padding: 10px 15px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: @gray-1; // display: flex;
  display: flex;
  .van-button {
    border-radius: 999px;
    display: block;
    // width: 100%;
    flex: 1;
    margin: 0 5px;
  }
}
</style>